<template>
       
				<div>
				<div class="h-27">
					<div class="p-1">
						<div class="p-2">摘牌申请</div>
						<div class="p-3">
							<!--路由-->
							<div class="b-8">
								<div class="b-9 p-4">当前位置： <a href="javascript:;">首页</a> > <a href="javascript:;">摘牌申请</a></div>
							</div>
						</div>
						<div class="q-1">
							<ul class="q-2">
								<li class="active">
									<div class="q-3"><div class="q-4"></div><div class="q-5">填写资料</div></div>
								</li>
								<li class="active">
									<div class="q-3"><div class="q-4"></div><div class="q-5">审核</div></div>
								</li>
								<li class="active">
									<div class="q-3"><div class="q-4"></div><div class="q-5">协商</div></div>
								</li>
								<li class="active">
									<div class="q-3"><div class="q-4"></div><div class="q-5">付款中</div></div>
								</li>
								<li>
									<div class="q-3"><div class="q-4"></div><div class="q-5">交货中</div></div>
								</li>
								<li>
									<div class="q-3"><div class="q-4"></div><div class="q-5">摘牌成功</div></div>
								</li>
							</ul>
						</div>
						
						<div class="u-1">
							<div class="u-2">
								<div class="u-3"><span class="u-4">电子签章费：</span><span class="u-5">{{signPrice}}元</span></div>
								<div class="u-3"><span class="u-4">摘牌手续费：</span><span class="u-5">{{otherPrice}}元</span></div>
								<div class="u-3" style="border: none;"><span class="u-4">共计：</span><span class="u-5">{{totalPrice}}元</span></div>
								<img class="u-6" src="@/assets/image/right2.png"/>
							</div>
							<div class="u-7">选择支付方式</div>
							<ul class="u-8">
								<li :class="paytype==0?'active':''"  @click="changPay(0)">
									<label class="u-9"></label>
									<img class="u-10" src="@/assets/image/wx.png" />
									<span class="u-11">微信</span>
								</li>
								<li :class="paytype==1?'active':''" @click="changPay(1)">
									<label class="u-9"></label>
									<img class="u-10" src="@/assets/image/zfb.png" />
									<span class="u-11">支付宝</span>
								</li>
								<li :class="paytype==2?'active':''" @click="changPay(2)">
									<label class="u-9"></label>
									<img class="u-10" src="@/assets/image/yhk_on.png" />
									<span class="u-11">银联支付</span>
								</li>
							</ul>
							<button class="u-12" @click="paysure">立即支付</button>
						</div>
						
					</div>
				</div>
	

			  <div style="clear: both;"></div>



              <el-dialog
  title="支付二维码"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <div class="fiximg">
      <img :src="pricUrl" width="200" height="200"/>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" type="danger">取消支付</el-button>
   
  </span>
</el-dialog>
    </div>


</template>
<script>
var _self;
import {countMoney,getPay} from '@/api/userIndex/myTrading';
export default {
    data(){
        return{
        contractId:undefined,
        price:undefined,
        paytype:0,
        dialogVisible:false,
		pricUrl:undefined,
		signPrice:0,
		otherPrice:0,
		totalPrice:0,
        }
    },
    created(){
        _self = this;
       _self.contractId = this.$route.query.contractId;
       _self.init();
    },
    methods:{
        init(){
        let param ={"contractId":_self.contractId};
        countMoney(param).then((res)=>{
		   console.log(res);
		    _self.signPrice = res.data.signPrice
				  _self.otherPrice = res.data.otherPrice
				  _self.totalPrice = res.data.totalPrice
           //_self.price=res.data;
        })
        },
        changPay(e){
            _self.paytype=e;
        },
        paysure(){
            let param={"contractId":_self.contractId,"price":_self.totalPrice}
            getPay(param).then((res)=>{
               if(res.code==200){
				  
                   _self.pricUrl=res.data
                   _self.dialogVisible= true
               }
            })
        }
    }
}
</script>
<style>
.fiximg{
   text-align: center;
}
.el-dialog__header{
    background: #d81e06;
}
.el-dialog__title{
    color:#fff;
}
@import "../../layui/css/layui.css";
    @import "../../css/index.css";
    @import "../../css/user_listing.css";
    @import "../../css/user_addlistingl.css";
    @import "../../css/idangerous.swiper.css";
    @import "../../css/user_adddeslisting.css";
     @import "../../css/user_pay.css";

</style>